<template>
  <div>
    <XiangQing :playlist="playlist" />
      <!-- subscribedCount  订阅数 -->
    <MyBottom :itemList="itemList" :subscribedCount="playlist.subscribedCount" />
  </div>
</template>

<script>
import XiangQing from "@/components/XiangQin/MyTop.vue";
import MyBottom from "@/components/XiangQin/MyBottom.vue";
// 引入api数据请求
import { getGequList, getgequ } from "@/Api/API";
import {} from "@/Api/API.js";
export default {
  data() {
    return {
      playlist: {}, //歌单的详情页的数据
      itemList: [], //歌单的歌曲
    };
  },
  created() {
    //进行方法调用
    this.gedan()
  },
  components: {
    XiangQing,
    MyBottom,
  },
  methods: {
    async gedan() {
      //  路由传参 获取 歌曲id
      let id = this.$route.query.id;
      //歌单的详情页的数据
      let gedan = await getGequList(id);
      this.playlist = gedan.data.playlist;
        //   防止页面刷新，数据丢失，将数据保存到sessionStorage中
      sessionStorage.setItem("playlist", JSON.stringify(this.playlist));
      //   获取歌单的歌曲
      let gequ = await getgequ({ id, limit: 30, offset: 0 });
      this.itemList = gequ.data.songs;
    },
  },
};
</script>

<style>
</style>